<template>
  <div>
    <!-- 头部tab -->
    <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>收藏夹</span>
      <div class="right">
        <div>
          <img  src="../assets/order_center/scs.png">
        </div>
        <div v-show="guanl">
        	<span>管理</span>
        </div>
				<div v-show="wanc">
					<span>完成</span>
				</div>
      </div>
    </div>
		<!-- 状态标题 -->
		<div class="states">
			<div>
				<span>全部类目</span>
				<img src="../assets/favorite/shang.png" alt="">
			</div>
			<div>
				<span>全部状态</span>
				<img src="../assets/favorite/xia.png" alt="">
			</div>
		</div>
		<!-- 管理/完成状态 -->
    <!-- 产品列表 -->
    <div class="list" v-show="wanc">
			<div class="list_box">
				<div class="center">
					<yd-checkbox-group v-model="chex">
						<yd-checkbox  :val="1" shape="circle">&nbsp;</yd-checkbox>
					</yd-checkbox-group>
					<div class="left">
						<img src="../assets/order_center/kongbai.png" alt="">
					</div>
					<div class="right">
						<div class="top">
							<div class="titles">
								<span>迪芙伦特U型午睡枕记忆枕头护颈枕旅行头颈枕记忆慢回弹棉</span>
							</div>
							<div class="sc">
								<span>2126人收藏</span>
							</div>
						</div>
						<div class="price">
							<span>￥14.94+9.96 鸿包</span>
						</div>
					</div>
				</div>
			</div>
			<div class="list_box">
				<div class="center">
					<yd-checkbox-group v-model="chex">
						<yd-checkbox  :val="1" shape="circle">&nbsp;</yd-checkbox>
					</yd-checkbox-group>
					<div class="left">
						<img src="../assets/order_center/kongbai.png" alt="">

					</div>
					<div class="right">
						<div class="top">
							<div class="titles">
								<span>迪芙伦特U型午睡枕记忆枕头护颈枕旅行头颈枕记忆慢回弹棉</span>
							</div>
							<div class="sc">
								<span>2126人收藏</span>
							</div>
						</div>
						<div class="price">
							<span>￥14.94+9.96 鸿包</span>
						</div>
					</div>
				</div>
			</div>
    </div>
		<!-- 底部 -->
		<div class="base" v-show="wanc">
			<yd-checkbox-group v-model="checkbox6">
        <yd-checkbox  shape="circle">全选</yd-checkbox>
      </yd-checkbox-group>
			<button class="cate">删除</button>
		</div>
		<!-- 管理状态 -->
		<div class="states_box">
			<div class="bars">
				<span>全部类目</span>
				<img src="../assets/favorite/gou.png" alt="">
			</div>
			<div class="bar">
				<span>女装</span>
				<span>235</span>
			</div>
			<div class="bar">
				<span>鞋</span>
				<span>182</span>
			</div>
			<div class="bar">
				<span>箱包皮具</span>
				<span>121</span>
			</div>
			<div class="bar">
				<span>彩妆/香水...</span>
				<span>93</span>
			</div>
			<div class="bar">
				<span>女士内衣/男士...</span>
				<span>78</span>
			</div>
			<div class="bar">
				<span>美容护肤/美体...</span>
				<span>44</span>
			</div>
			<div class="bar">
				<span>服饰配件/皮带...</span>
				<span>693</span>
			</div>
			<div class="bar">
				<span>家用电器</span>
				<span>19</span>
			</div>
			<div class="bar">
				<span>居家布艺</span>
				<span>17</span>
			</div>
			<div class="bar">
				<span>日用百货</span>
				<span>8</span>
			</div>
		</div>
  </div>
</template>

<script>
import Vue from 'vue';
import {CheckBox, CheckBoxGroup} from 'vue-ydui/dist/lib.rem/checkbox';
Vue.component(CheckBox.name, CheckBox);
Vue.component(CheckBoxGroup.name, CheckBoxGroup);
export default {
  name: "favorite",
  data() {
    return {
			// chex:1,
			index: 0,
			zin: "-1",
			guanl: true,
			wanc: false,
			hidd: true,
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    ChangeMenu: function(index) {
      this.index = index;
      console.log(this.index);
		},
		authority: function bj() {
			this.shou = false;
  	},
		finish: function wc() {
			this.setData({
				zin: "-1"
			}), this.setData({
				den: false
			}), this.setData({
				wanc: true
			});
		},
  }
};
</script>


<style scoped>
.base{
  width: 100%;
  position: fixed;
	background:#FFF;
  bottom: 0;
  z-index: 9999999;
	padding: .2rem .3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.base .cate{
	color: #FFF; 
	width:1.4rem;
	height:.60rem;
  line-height: .60rem;
  border-radius:18px; 
  font-size: .26rem;
  text-align: center;
	background: #e53a30;
	border:none;
}
.top_tab {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.09rem #ddd;
  margin-bottom: 0.03rem;
}
.top_tab span {
  color: #333;
  font-size: 0.36rem;
}
.top_tab .right {
  width: 1.35rem;
  display: flex;
  justify-content: space-between;
}
.top_tab img {
  width: 0.43rem;
}
.title {
  margin-top: 0.02rem;
  padding: 0 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
.states{
	width:100%;
	background: #f2f2f2;
	padding: .3rem .3rem;
	display: flex;
}
.states div{
	display: flex;
	align-items: center;
}
.states div~div{
	margin-left: .6rem;
}
.states span{
	font-size: .26rem;
	color:#666;
}
.states img{
	width:.18rem;
	height:.13rem;
	margin-left: .1rem;
}
.list {
  width: 100%;
}
.list .list_box{
	width:100%;
	background: #FFF;
}
.list_box~.list_box{
	margin-top: .3rem;
}
.list .list_box .center {
  padding: 0.2rem 0.3rem;
  display: flex;
  justify-content: space-between;
	align-items: center;
}
.list .list_box .center .left {
  width: 23%;
}
.list .list_box .center .left img {
  width: 100%;
  height: 100%;
}
.list .list_box .center .right {
  width: 73%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
	margin-left: .3rem;
}
.list .list_box .center .right .top{
	width:100%;
	display: flex;
	flex-direction: column;
	line-height: 1.5;
}
.list .list_box .center .right .top .titles {
  width: 100%;
}
.list .list_box .center .right .top .titles span {
  font-size: 0.26rem;
  color: #333;
}
.list .list_box .center .right .top .sc{
	font-size:.24rem;
	color:#999;
}
.list .list_box .center .right .price {
  width: 100%;
}
.list .list_box .center .right .price span {
  font-size: 0.26rem;
  color: #e63f3f;
}
/* 我是分割线 */
.states_box{
	width:100%;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	padding: 0 .3rem;
}
.states_box .bars{
	color:#e53a30;
	background: #fde2e3;
	width:48.5%;
	height:1.01rem;
	display: flex;
	padding: 0 .3rem;
	justify-content: space-between;
	align-items: center;
}
.states_box .bars img{
	width:.27rem;
	height:.22rem;
}
.states_box .bar{
	width:48.5%;
	height:1.01rem;
	display: flex;
	padding: 0 .3rem;
	justify-content: space-between;
	align-items: center;
	background: #FFF;
}


.bar:nth-child(2)~.bar{
	margin-top: .2rem;
}
.states_box .bar span{
	color:#666;
	font-size: .26rem;
}
.states_box .bar span:nth-child(2){
	color:#999;
	font-size: .24rem;
}
</style>
